<template>
	<view class="pageItem">
		<view class="main">
			<block v-for="(item,index) in list" :key="'n_'+index">
				<block v-if="item.is_read">
					<view class="card" @click="$r('/pages/notice/noticeDetail?id='+item.id)" >
						<view class="c_tit">
							<view class="iconfont icon">&#xe60c;</view>
							<view class="tit">{{item.title}}</view>
						</view>
						<view class="c_con">
							<u-parse :content="item.msg"></u-parse>
						</view>
						<view class="c_footer">
							<view class="t1">{{$t('use.find_more')}}</view>
							<view class="t2">{{item.st|formatTime1}}</view>
							<view class="iconfont more">&#xe70f;</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="card card_s" @click="$r('/pages/notice/noticeDetail?id='+item.id)" >
						<view class="c_tit">
							<view class="iconfont icon">&#xe60c;</view>
							<view class="tit">{{item.title}}</view>
						</view>
						<view class="c_con">
							<u-parse :content="item.msg"></u-parse>
						</view>
						<view class="c_footer">
							<view class="t1">{{$t('use.find_more')}}</view>
							<view class="t2">{{item.st|formatTime1}}</view>
							<view class="iconfont more">&#xe70f;</view>
						</view>
					</view>
				</block>
			</block>
		</view>
		<view class="no_msg" v-if="list.length == 0">
			<image class="img" src="/static/nodata.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:0,
				page:1,
				scrrol:false,
				load_type: 'more',
				empty_show : 0,
				list : [],
				
			};
		},
		onReachBottom() {
		     this.loadData();
		},
		onLoad() {
			 uni.$on('my_read',(id)=>{
				 let index = this.list.findIndex(vo=>{ return vo.id == id });
				 this.list[index].is_read = 1;
				 let msg = this.list.splice(index,1);
				 this.list.push(msg);
			 }); 
			 this.loadData();
		},
		onUnload() {
			uni.$off('my_read');
		},
		methods:{
			page_init(){
				this.list = [];
				this.load_type = 'more';
				this.page = 1;
				this.loadData();
			},
			loadData() {
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
			    let url = this.site_url + 'api/index/msg_list?page='+this.page;
				let param = {
					msg_type : this.select
				};
				this.areq(url,param,'POST').then(res=>{
					this.empty_show = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
				});
			
			},
			
		}
		
	}
</script>

<style lang="scss">
.main{
	width: 100%;
	padding: 3vw 4% 0;
	.card_s{
		.icon{ background: $main_color_s !important;color: $main_color5 !important; }
		.tit{ color: $main_color5 !important; }
		.c_con{ color: $main_color4 !important; }
		.t1{ color: $main_color5 !important; }
		.t2{ color: $main_color4 !important; }
		.more{ color: $main_color4 !important; }
	}
	.card{
		@include card_style();
		margin-top: 4vw;
		.c_tit{
			width: 100%;
			display: flex;
			align-items: center;
			.icon{
				width: 8vw;
				height: 8vw;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background: #dedede;
				color: $main_color2_s;
				font-size: 6vw;
			}
			.tit{
				flex: 1;
				font-size: 4.3vw;
				color: #949494;
				font-weight: bold;
				padding-left: 3vw;
				@include text_over_style(1);
			}
		}
		.c_con{
			margin: 3vw 0;
			font-size: 3.6vw;
			color: $main_color4;
			line-height: 6vw;
			@include text_over_style(2);
		}
		.c_footer{
			width: 100%;
			padding: 3vw 0 0;
			display: flex;
			align-items: center;
			font-size: 3.6vw;
			border-top: 1rpx solid #f4f4f4;
			color: $main_color4;
			.t1{
				font-weight: bold;
			}
			.t2{
				flex: 1;
				text-align: right;
			}
			.more{
				font-size: 3.2vw;
				padding-left: 3vw;
			}
		}
	}
}
</style>
